import 'normalize.css'
import 'nprogress/nprogress.css'

import store from '@/store'
import IconSvg from './icon-svg/index.vue'
import './icon-svg/icons'

import ElementPlus from 'element-plus'
import locale from 'element-plus/es/locale/lang/zh-cn.mjs'
import 'element-plus/dist/index.css'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

import '@/assets/style/jaguar.scss'

import Buttons from './Button'
import SearchInput from './SearchForm/SearchInput'
import SearchSelect from './SearchForm/SearchSelect'
import DictionaryLabel from './dictionary/index.vue'
import TablePage from './TablePage'
import DeptTreeSelect from './DeptTreeSelect'

import PrimeVue from 'primevue/config'
import ConfirmationService from 'primevue/confirmationservice'
import Lara from '@primevue/themes/lara'
import 'primeicons/primeicons.css'
import ZH_CN from './zh-CN.json'

import AnimateOnScroll from 'primevue/animateonscroll'
import BadgeDirective from 'primevue/badgedirective'
import FocusTrap from 'primevue/focustrap'
import Ripple from 'primevue/ripple'
import StyleClass from 'primevue/styleclass'
import Tooltip from 'primevue/tooltip'

import ThemeSwitcher from './ThemeSwitcher'

// 加载全局组件
export function loadComponents(app) {
  app.component('icon-svg', IconSvg)

  app.use(ElementPlus, { locale })
  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
  }

  app.use(PrimeVue, {
    ripple: true,
    locale: ZH_CN,
    theme: {
      preset: Lara,
      options: {
        darkModeSelector: '.p-dark',
      },
    },
  })
  app.use(ConfirmationService)

  app.directive('animateonscroll', AnimateOnScroll)
  app.directive('badge', BadgeDirective)
  app.directive('focustrap', FocusTrap)
  app.directive('ripple', Ripple)
  app.directive('styleclass', StyleClass)
  app.directive('tooltip', Tooltip)

  app.component('theme-switcher', ThemeSwitcher)

  for (let key in Buttons) {
    app.component(key, Buttons[key])
  }

  app.component('search-input', SearchInput)
  app.component('search-select', SearchSelect)
  app.component('dictionary-label', DictionaryLabel)
  app.component('table-page', TablePage)
  app.component('dept-tree-select', DeptTreeSelect)

  app.directive('hasPermission', {
    mounted(el, binding) {
      for (let i in store.getters.permissions) {
        if (binding.value == store.getters.permissions[i]) {
          return
        }
      }
      el.parentNode.removeChild(el)
    },
  })
}
